{% extends "/shared/layout.html" %}
{% block mainContent %}
<div class="header">
    <div class="wrapper">
      <ul>
       <li class="li_250">
         <div class="u_info">
           
            <form action="" method="POST" enctype="multipart/form-data">
                <fieldset>
                    <a class="u_photo" href="javascript:void(0);">
                        <img src="{% if(user_info.photo) %} {{user_info.photo}} {% else %} ../static/images/photo.png {% endif %}" alt=""/>
                        <input id="btnUpload" name="file" type="file" title="{{pageRes.btnUploadTitle}}:200*200px" value="" />
                    </a>
                </fieldset>
            </form>
             
         </div>
       </li>
       <li class="li_750">
        <div class="u_pro">
          <dl>
            <dd class="dd_1">
              <div class="pro_area" attr-field="username">
                <div class="pro_show">
                  <span>{{user_detail.username}}</span>
                  <em class="edit"></em>
                </div>
                <div class="pro_edit">
                  <input type="text" class="required" value="" />
                  <em class="save"></em><em class="cancel"></em>
                </div>
              </div>
              <label>{{layoutRes.lblUserName}}</label>
            </dd>
            <dd class="dd_2">
              <div class="pro_area" attr-field="birthday">
                <div class="pro_show">
                  <span class="h1">{{user_detail.birthday}}</span>
                  <em class="edit"></em>
                </div>
                <div class="pro_edit">
                  <input id="txtBrithday" readonly="true" type="text" value="" />
                  <em class="save"></em><em class="cancel"></em>
                </div>
              </div>
              <label>{{layoutRes.lblUserBirthday}}</label>
            </dd>
            <dd class="dd_3">
              <div class="pro_area" attr-field="height">
                <div class="pro_show">
                  <span class="h1">{{user_detail.height}}</span>cm
                  <em class="edit"></em>
                </div>
                <div class="pro_edit">
                  <input type="text" class="required digits" value="" />cm
                  <em class="save"></em><em class="cancel"></em>
                </div>
              </div>
              <label>{{layoutRes.lblUserHeight}}</label>
            </dd>
            <dd class="dd_4">
              <div class="pro_area" attr-field="weight">
                <div class="pro_show">
                  <span class="h1">{{user_detail.weight}}</span>kg
                  <em class="edit"></em>
                </div>
                <div class="pro_edit">
                  <input type="text" class="required float" value="" />kg
                  <em class="save"></em><em class="cancel"></em>
                </div>
              </div>
              <label>{{layoutRes.lblUserWeight}}</label>
            </dd>
            <dd class="dd_5">
              <div class="pro_area" attr-field="gender">
                <div class="pro_show">
                  <span field-value="{{user_detail.gender}}">
                    {%- if user_detail.gender == 'male' -%}
                    {{pageRes.lblMale}}
                    {%- else -%}
                    {{pageRes.lblFemale}}
                    {%- endif -%}
                  </span>
                  <em class="edit"></em>
                </div>
                <div class="pro_edit">
                  <label><input type="radio" name="sex" value="male" />{{pageRes.lblMale}}</label>
                  <label><input type="radio" name="sex" value="female" />{{pageRes.lblFemale}}</label>
                  <em class="save"></em><em class="cancel"></em>
                </div>
              </div>
              <label>{{pageRes.lblSex}}</label>
            </dd>
            <dd class="dd_6">
              <div class="pro_area" attr-field="location">
                <div class="pro_show">
                  <span field-value="{{user_detail.location}}"></span>
                  <em class="edit"></em>
                </div>
                <div class="pro_edit">
                  <select id="provice">
                  </select>
                  <select id="city" style="display:none;">
                  </select>
                  <em class="save"></em><em class="cancel"></em>
                </div>
              </div>
              <label>{{pageRes.lblCity}}</label>
            </dd>
            <dd class="dd_7">
              <div class="pro_area" attr-field="goal">
                <div class="pro_show">
                  <span class="h1">{{user_detail.user_goal}}</span>{{layoutRes.unitStep}}
                  <em class="edit"></em>
                </div>
                <div class="pro_edit">
                  <input type="text" class="required digits" value="" />{{layoutRes.unitStep}}
                  <em class="save"></em><em class="cancel"></em>
                </div>
              </div>
              <label>{{pageRes.dayGoalDesc}}</label>
            </dd>
            <dd class="dd_8">
              <div class="pro_area" attr-field="constellation">
                <div class="pro_show">
                  <span>{{user_detail.constellation}}</span>
                  <em class="edit"></em>
                </div>
                <div class="pro_edit">
                  <input type="text" class="required" value="" />
                  <em class="save"></em><em class="cancel"></em>
                </div>
              </div>
              <label>{{pageRes.lblConstellation}}</label>
            </dd>
          </dl>
        </div>
       </li>
     </ul>
    </div>
  </div>
  <div class="wrapper">
    <div class="pro_main">
      <div class="left">
        <div class="pro_icon btnIcon">
          <img src="../static/images/icon_lock.png" alt="" /><br />
          <span class="h1">{{pageRes.lblModifyPwd}}</span>
        </div>
        <div id="pwdForm" class="et_form pro_form">
          <div class="arrow_down">
            <span class="btnClose"></span>
          </div>
          <ul>
            <li>
              <label>{{pageRes.lblOldPwd}}：</label>
              <input class="txtPwd" type="password" value="" />
              <span></span>
            </li>
            <li>
              <label>{{pageRes.lblNewPwd}}：</label>
              <input class="txtNewPwd" type="password" value="" />
              <span></span>
            </li>
            <li>
              <label>{{pageRes.lblConfirmPwd}}：</label>
              <input class="txtConfirmPwd" type="password" value="" />
              <span></span>
            </li>
          </ul>
          <div class="bottom">
            <button class="form_button btnSumbit">{{pageRes.btnConfirm}}</button>
          </div>
        </div>
      </div>
      <!-- <div class="right">
        <div class="pro_icon">
          <img class="btnIcon"  src="../static/images/icon_mail.png" alt="" />
        </div>
        <div class="et_form pro_form">
          <div class="arrow_down">
            <span class="btnClose"></span>
          </div>
          <ul>
            <li>
              <label>当前邮件：</label>
              <input class="txtPwd" type="password" value="" />
              <span></span>
            </li>
            <li>
              <label>新邮件：</label>
              <input class="txtPwd" type="password" value="" />
              <span></span>
            </li>
            <li>
              <label>确认密码：</label>
              <input class="txtConfirmPwd" type="password" value="" />
              <span></span>
            </li>
          </ul>
          <div class="bottom">
            <button class="form_button btnSumbit">提交</button>
            <div class="loading"></div>
          </div>
        </div>
      </div> -->
    </div>
   <!--  <div class="pro_auth odd" attr-field="is_sportdata">
      <ul>
        <li class="li_desc">
          <div class="icon icon_1"></div>
          <div class="desc">我的运动记录</div>
        </li>
        <li class="liHover {% if user_detail.is_sportdata == 1 %} selected {% endif %}" attr-privacy="common">
          <em></em>
          <div class="desc">所有人</div>
        </li>
        <li class="liHover {% if user_detail.is_sportdata == 2 %} selected {% endif %}" attr-privacy="friend">
          <em></em>
          <div class="desc">仅好友</div>
        </li>
        <li class="liHover {% if user_detail.is_sportdata == 3 %} selected {% endif %}" attr-privacy="self">
          <em></em>
          <div class="desc">仅自己</div>
        </li>
      </ul>
    </div>
    <div class="pro_auth even" attr-field="is_user_info_visible">
      <ul>
        <li class="li_desc">
          <div class="icon icon_2"></div>
          <div class="desc">个人信息</div>
          </li>
        <li class="liHover {% if user_detail.is_user_info_visible == 1 %} selected {% endif %}" attr-privacy="common">
          <em></em>
          <div class="desc">所有人</div>
        </li>
        <li class="liHover {% if user_detail.is_user_info_visible == 2 %} selected {% endif %}" attr-privacy="friend">
          <em></em>
          <div class="desc">仅好友</div>
        </li>
        <li class="liHover {% if user_detail.is_user_info_visible == 3 %} selected {% endif %}" attr-privacy="self">
          <em></em>
          <div class="desc">仅自己</div>
        </li>
      </ul>
    </div>
    <div class="pro_auth odd" attr-field="is_search">
      <ul>
        <li class="li_desc">
          <div class="icon icon_8"></div>
          <div class="desc">搜索到我</div>
        </li>
        <li class="liHover {% if user_detail.is_search == 1 %} selected {% endif %}" attr-privacy="common">
          <em></em><div class="desc">允许</div>
        </li>
        <li class="liHover {% if user_detail.is_search == 3 %} selected {% endif %}" attr-privacy="self">
          <em></em><div class="desc">禁止</div>
        </li>
      </ul>
    </div> -->
  </div>
  <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
  <script type="text/javascript" src="../static/scripts/dependency/fileupload/jquery.iframe-transport.js"></script>
  <!-- The basic File Upload plugin -->
  <script type="text/javascript" src="../static/scripts/dependency/fileupload/jquery.fileupload.js"></script>
  <!-- The File Upload validation plugin -->
  <script type="text/javascript" src="../static/scripts/dependency/fileupload/jquery.fileupload-process.js"></script>
  <script type="text/javascript" src="../static/scripts/dependency/fileupload/jquery.fileupload-validate.js"></script>
  <script type="text/javascript" src="../static/scripts/views/user/etlinking.views.userInfo.js"></script>
  <script type="text/javascript">
    $(function() {
      nsbase.views.userInfo.init();
    });
  </script>
{% endblock %}